<template>
  <div class="friend-wrap" v-loading="loading">
    <div class="friend-item" v-for="(item, key) in friends" :key="'frdl'+key">
      <div class="left">
        <el-image :src="item.avatar" class="avatar"/>
        <div class="info">
          <p>{{ item.nickname }}</p>
          <p class="font-12 color-info">{{ item.msg }}</p>
        </div>
      </div>
      <div class="right">
        <span class="btn accept" @click="handlerResponse(1, item.uid)">接受</span>
        <span class="btn denny" @click="handlerResponse(2, item.uid)">拒绝</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, onMounted, reactive, toRefs} from 'vue'
import {getNewFriends, responseNewFriendRequest} from "/@/api/imapi";
import {ElMessage, ElMessageBox} from 'element-plus';
import {useUserInfo} from "/@/stores/userInfo";
import {storeToRefs} from "pinia";

export default defineComponent({
  name: "ChatNewFriends",
  props: {
    uid: {
      type: String,
      default: () => '',
    },
  },
  setup(props, {emit}) {
    const stores = useUserInfo();
    const {userInfos} = storeToRefs(stores);
    const state = reactive({
      loading: true,
      friends: []
    });
    onMounted(() => {
      getUserNewFriends();
    });
    const getUserNewFriends = () => {
      state.loading = true
      getNewFriends({uid: props.uid}).then(res => {
        state.friends = res.data.list
        state.loading = false
      })
    };
    const handleEventClose = () => {
      emit('handleClose', {})
    };
    const handlerResponse = (_state: number, _toUid: string) => {
      const _str = _state == 1 ? '通过' : '拒绝';
      ElMessageBox.confirm(`确认${_str}当前用户好友申请！`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            responseNewFriendRequest({uid: userInfos.value.hash, toUid: _toUid, state: _state}).then(res => {
              ElMessage.success('操作成功！');
            })
          })
          .catch(() => {
          });
    };
    return {
      ...toRefs(state),
      handleEventClose,
      handlerResponse
    };
  }
})
</script>

<style scoped lang="scss">
.friend-wrap {
  width: 100%;
  padding: 20px;
  margin: 0 20px 20px;

  .friend-item {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    padding: 20px 0;
    border-bottom: 1px solid #EFEFEF;

    .left {
      display: flex;
      align-items: center;

      .info {
        p {
          padding: 2px 0;
        }
      }

      .avatar {
        width: 36px;
        height: 36px;
        border-radius: 6px;
        margin-right: 10px;
      }
    }

    .right {
      font-size: 12px;

      .btn {
        color: #ffffff;
        padding: 5px 10px;
        display: inline-block;
      }

      .accept {
        background-color: var(--el-color-success);
        margin-right: 10px;
      }

      .denny {
        background-color: var(--el-color-danger);
      }
    }
  }
}
</style>
